{% extends 'news/news_xq.html' %}

{% block title %}新闻快讯{% endblock %}

{% block style %}
    {% load static %}
    <link rel="stylesheet" href="{% static 'news/css/base_news.css' %}">
    <link rel="stylesheet" href="{% static 'news/css/news_xq.css' %}">
    <link rel="stylesheet" href="{% static 'news/css/news_kx.css' %}">


{% endblock %}


{% block l_left %}

    <form action="{% url 'news:news_kxxq' %}" method="post">
        <div class="l_top">
            <div></div><span>快讯</span>
            <p>2018年10月29日 星期一</p>
        </div>

        <div class="l_down">
            <ul class="articlessss">
                    {% for article in art_list %}
                        <li class="articl">

                            <p class="g1"><span>{{ article.digist }}</span></p>
                            <p class="g2"><span>{{ article.content|truncatechars:100|striptags }}</span></p>
                            <p class="g3">
                                <span>{{ article.distribute_time|date:'Y-m-d' }}</span>
                                <a><img src="{% static 'news/media/xiaochengxu/k_03@2x.png' %}">{{ article.votes_count }}</a>
                                <a><img src="{% static 'news/media/web/k_03.png' %}">分享</a>
                            </p>
                        </li>
                    {% endfor %}

                </ul>

        </div>

    </form>
{% endblock %}



{% block n_right %}
    <div class="n_right">
        <p></p>
        <img src="/static/news/media/1.jpg">
        <span class="sao">扫码小程序</span>
        <span class="zhang">掌上轻松阅读>></span>
    </div>
{% endblock %}


{% block n_down %}
    <form action="" method="post">
        <div class="n_down">
            <p></p>
            <a href=""><span>热门新闻</span></a>
            <div class="n1_down">
                <div class="swiper-container left">
                    <div class="swiper-wrapper">
                        {% for article in art_list %}
                                 <div class="swiper-slide"><img src="{% url 'media' article.image %}"></div>
                        {% endfor %}

                    </div>
                    <div class="n2_down">
                        <span>去香港，收割一个时代</span>
                    </div>
                </div>
            </div>
            <ul class="n3_down">
                {% for article in art_list %}
                    <li>
                        <img class="art1" src="{% url 'media' article.image %}">
                        <p class="art3"><a href="{% url 'news:news_xq' %}?news_id={{ article.id }}">{{ article.content }}</a></p>
                        <p class="art6">{{ article.distribute_time|date:'Y-m-d' }}</p>
                    </li>
                {% endfor %}
            </ul>
        </div>

    </form>

{% endblock %}



{% block js %}
    <script>
        var mySwiper = new Swiper ('.swiper-container', {
            {#direction: 'vertical', // 垂直切换选项#}
            loop: true, // 循环模式选项
            autoplay:true,//等同于以下设置


            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },


        });


        $('.btn>button').click(function () {
            $('.content').html('');
            status = $(this).attr('a');
            $('.btn>button').prop('class', '');
            $(this).prop('class', 'active');
            $.ajax({
                url: "{% url 'news:news_list' %}?status=" + status,
                success: function(data) {
                    loadDataAndShow(data);
                },
                error: function (e) {
                    console.log(e);
                }
            });

            function loadDataAndShow(data) {
                if (!$.isArray(data)) return;
                data.forEach(function (e, index) {
                    li = $('<li/>');
                    img = $('<img/>');
                    img.attr("src","{% url 'media' '' %}"+ e.image).addClass('art1');
                    h3 = $('<h3/>').html(e.title).addClass('art2');
                    p1 = $('<p/>').html(e.content).addClass('art3');
                    p2 = $('<p/>').html(e.digist).addClass('art5');
                    {#console.log(e.distribute_time);#}
                    time = e.distribute_time.split('T')[0];
                    p3 = $('<p/>').html(time).addClass('art6');
                    li.append(img,h3,p1,p2,p3);
                    $('.content').append(li);
                });
            }
        });
    </script>

{% endblock %}
